<template>
  <div>
    <tabs :tabs="tabs" />
    <div class="details">
      <div class="details-title">题目信息</div>
      <div class="details-topic">
        <div class="title" v-html="topicInfo.title" />
        <!-- 填空 -->
        <div v-if="topicInfo.question_type == 5" class="answer">
          <div v-for="(option, index) in topicInfo.options" :key="index">
            <span>第{{ index + 1 }}空 :</span>
            <span>{{ option }}</span>
          </div>
        </div>
        <!-- 完形填空 -->
        <div v-else-if="topicInfo.question_type == 7" class="answer">
          <el-row v-for="(item, index) in topicInfo.options" :key="index" type="flex">
            <div>{{ index + 1 }}、</div>
            <div v-for="ans in item.options" :key="ans.key" class="m-r-20">
              <span>{{ ans.key }}.</span>
              <span v-html="ans.value" />
            </div>
          </el-row>
        </div>
        <div v-else-if="topicInfo.question_type == 6" class="answer" />
        <!-- 单选 判断 多选 不定项 -->
        <div v-else class="answer">
          <div v-for="item in topicInfo.options" :key="item.key" class="options">
            {{ item.key }}.
            <span v-html="item.value" />
          </div>
        </div>
      </div>

      <div class="details-data">
        <el-row type="flex">
          <el-col :span="3"><div class="label">所属题库</div></el-col>
          <el-col :span="5">
            <div class="desc">{{ topicInfo.question_bank_title }}</div>
          </el-col>
          <el-col :span="3"><div class="label">题目类型</div></el-col>
          <el-col :span="5">
            <div class="desc">{{ topicInfo.question_type_text }}</div>
          </el-col>
          <el-col :span="3"><div class="label">难易度</div></el-col>
          <el-col :span="5">
            <div class="desc">{{ topicInfo.difficulty_title }}</div>
          </el-col>
          <el-col :span="3"><div class="label">被引用次数</div></el-col>
          <el-col :span="5">
            <div class="desc">{{ topicInfo.num }}</div>
          </el-col>
          <el-col :span="3"><div class="label">作答次数</div></el-col>
          <el-col :span="5">
            <div class="desc">{{ topicInfo.answer_num }}</div>
          </el-col>

          <el-col :span="3"><div class="label">正确率</div></el-col>
          <el-col :span="5"><div class="desc">0%(暂未统计)</div></el-col>
          <el-col :span="3"><div class="label">知识点</div></el-col>
          <el-col :span="21">
            <div class="desc point">{{ topicInfo.point_str }}</div>
          </el-col>
          <el-col :span="3"><div class="label">正确答案</div></el-col>
          <el-col :span="21">
            <!-- 填空 -->
            <div v-if="topicInfo.question_type == 5" class="desc">
              以每空答案为准
              <span v-if="topicInfo.completion_position == 1">，且每空答案位置不固定</span>
            </div>
            <div v-else-if="topicInfo.question_type == 6" class="desc">以每小题为准</div>
            <!-- 完形填空 -->
            <div v-else-if="topicInfo.question_type == 7" class="desc">
              <span v-for="(item, index) in topicInfo.options" :key="index">{{ item.answers }}</span>
            </div>
            <!-- 简答 -->
            <div v-else-if="topicInfo.question_type == 8" class="desc" v-html="topicInfo.answers" />
            <!-- 单选 判断 多选 不定项 -->
            <div v-else class="desc">{{ topicInfo.answers }}</div>
            <!-- <div v-else class="desc" v-html="topicInfo.answers" /> -->
          </el-col>

          <el-col :span="3"><div class="label">题目解析</div></el-col>
          <el-col :span="21"><div class="desc height" v-html="topicInfo.analyze || '无'" /></el-col>
        </el-row>
      </div>

      <!-- 材料题 -->
      <div v-if="topicInfo.question_type == 6" class="details-material">
        <div v-for="(item, index) in topicInfo.options" :key="index">
          <div class="details-topic">
            <el-row type="flex">
              <div>{{ index + 1 }}、({{ item.question_type_text }})</div>
              <div class="title" v-html="item.title" />
            </el-row>
            <!-- 单选 判断 多选 不定项 -->
            <div class="answer">
              <div v-for="ans in item.options" :key="ans.key" class="options">
                {{ ans.key }}.
                <span v-html="ans.value" />
              </div>
            </div>
          </div>
          <div class="details-data">
            <el-row type="flex">
              <el-col :span="3"><div class="label">题目类型</div></el-col>
              <el-col :span="5">
                <div class="desc">{{ item.question_type_text }}</div>
              </el-col>

              <el-col :span="3"><div class="label">难易度</div></el-col>
              <el-col :span="5">
                <div class="desc">{{ item.difficulty_title }}</div>
              </el-col>

              <el-col :span="3"><div class="label">正确率</div></el-col>
              <el-col :span="5"><div class="desc">0%(暂未统计)</div></el-col>

              <el-col :span="3"><div class="label">正确答案</div></el-col>
              <el-col :span="21">
                <!-- 材料题 -->
                <!-- 单选 判断 多选 不定项 -->
                <div class="desc">{{ item.answers }}</div>
              </el-col>

              <el-col :span="3"><div class="label">题目解析</div></el-col>
              <el-col :span="21"><div class="desc height" v-html="item.analyze || '无'" /></el-col>
            </el-row>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Tabs from './tabs/index.vue';
export default {
  components: {
    Tabs
  },
  data() {
    return {
      tabs: [
        {
          title: '试题详情',
          uri: '/exam/question/topic/' + this.$route.params.id + '/details',
          meta: {
            permission: 'exam.question.topic.list'
          }
        }
      ],
      topicInfo: {}
    };
  },
  created() {
    // 获取试题详情
    this.getTopicInfo();
  },
  methods: {
    getTopicInfo() {
      const topicId = this.$route.params.id;
      this.$http.get(
        '/exam/admin/question/topic/' + topicId + '/info',
        {},
        ({ data }) => {
          this.topicInfo = data;
        },
        _ => {}
      );
    }
  }
};
</script>

<style lang="scss" scoped>
.details {
  padding: 0px 57px 20px 28px;
  .el-row--flex {
    flex-wrap: wrap;
  }
  &-title {
    height: 36px;
    font-size: 15px;
    font-weight: 500;
    color: #303133;
    display: flex;
    align-items: center;
    background: rgba(241, 248, 255, 0.8);
    &::before {
      content: '';
      width: 2px;
      height: 14px;
      margin-right: 6px;
      background: #5191ff;
    }
  }
  &-topic {
    margin-top: 18px;
    .title {
      font-size: 13px;
      font-weight: 400;
      color: #5f5f5f;
    }
    .answer {
      margin-top: 30px;
      font-size: 13px;
      font-weight: 400;
      color: #5f5f5f;
      line-height: 28px;
      .options {
        display: flex;
      }
      .m-r-20 {
        margin-right: 20px;
      }
    }
  }
  &-data {
    margin-top: 30px;
    box-sizing: border-box;
    border-style: solid;
    border-color: #b7bac1;
    border-width: 1px 0 0 1px;
    .el-col {
      display: flex;
      border-style: solid;
      border-color: #b7bac1;
      border-width: 0 1px 1px 0;
    }
    .label {
      width: 100%;
      padding: 15px 20px;
      font-size: 14px;
      font-weight: 400;
      color: #5f5f5f;
      background: #f7f7f7;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .desc {
      width: 100%;
      padding: 15px 20px;
      font-size: 14px;
      font-weight: 400;
      color: #5f5f5f;
      &.point span {
        margin-right: 10px;
      }
    }
    .height {
      min-height: 130px;
    }
  }
}
</style>
